flutter实现下拉刷新和加载更多

您所在的位置：网站首页 › flutter nestedscrollview 刷新 › flutter实现下拉刷新和加载更多

flutter实现下拉刷新和加载更多

2023-04-14 12:28| 来源: 网络整理| 查看: 265

flutter实现下拉刷新和加载更多原创

baorant24 2023-04-10 15:47:36 博主文章分类：flutter ©著作权

文章标签下拉刷新 flutter 加载更多 flutter下拉刷新文章分类 Android 移动开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者baorant24的原创作品，请联系作者获取转载授权，否则将追究法律责任问题背景

移动端日常开发过程中，下拉刷新和加载更多是很常见的功能点，现在一起看下flutter是如何实现下拉刷新和加载更多的。

问题分析

1、通过Dio框架获取网络请求

var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$_page"; Response result = await Dio().get(url); var list = json.decode(result.data)["result"];

2、Flutter中提供了组件 RefreshIndicator用于下拉刷新其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。

RefreshIndicator( child: ListView.builder( ...... ), // 2、回调下拉刷新事件 onRefresh:this._onRefresh )

3、flutter中主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多

ListView.builder( // 上拉加载控制器 controller: _scrollController, itemCount: this._list.length, itemBuilder: (context,index){ Widget tip = Text(""); // 当渲染到最后一条数据时，加载动画提示 if(index == this._list.length-1){ tip = _getMoreWidget(); } return Column( children: [ ListTile( title:Text( "${this._list[index]["title"]}", maxLines:1, ) ), Divider(), // 加载提示 tip ], ); }, ), 问题解决

上面分析了flutter实现下拉刷新和加载更多的关键环节，完整代码如下：

import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; class Test extends StatefulWidget { _TestState createState() => _TestState(); } class _TestState extends State { // 页数 int _page = 1; // 页面数据列表 List _list = []; // 标志位：是否有更多数据 bool _hasMore = true; // 滚动控制器 ScrollController _scrollController = new ScrollController(); @override void initState() { super.initState(); this._getData(); // 监听滚动事件 _scrollController.addListener((){ if(_scrollController.position.pixels>_scrollController.position.maxScrollExtent-40){ this._getData(); } }); } // 获取数据列表 void _getData() async{ if(this._hasMore){ var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$_page"; Response result = await Dio().get(url); var list = json.decode(result.data)["result"]; setState(() { // 拼接数据 this._list.addAll(list); // 页数累加 this._page++; }); if(list.length 赞收藏评论分享举报

上一篇：rxjava使用介绍（1）——进行计时操作

下一篇：flutter实现下拉菜单组件——基于PopupMenuButton

【本文地址】

flutter实现下拉刷新和加载更多

flutter实现下拉刷新和加载更多

今日新闻

推荐新闻